/**
* @功能描述: baseMenu组件
* @author: lzn
* @date: 2022-09-22 17:58:36
* @version: 1.0
*/

<script setup>
import { onBeforeMount, ref, watch, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
    menuItem: Array,
    mode: String
})
const router = useRouter();
const route = useRoute();
const selectKey = ref();
const visible = reactive({});

onBeforeMount(() => {
    watch(
        () => route.path,
        (path) => {
            selectKey.value = path;
            props.menuItem.forEach(item => {
                if(item.children && item.children.some(ele => ele.path === path)) {
                    visible[item.title] = true;
                }
            })
        },
    )
})

function noFresh(path, e) {
    e.preventDefault();
    selectKey.value = path;
    router.push(path);
}

function handleVisible(key) {
    visible[key] = !visible[key];
}
</script>

<template>
    <ul class="yw-base-menu" :class="mode && 'yw-menu-overflow'">
        <li class="menu-item-group" v-for="menu in menuItem" :key="menu.title">
            <div class="menu-item-group-title" :title="menu.title" @click="handleVisible(menu.title)">{{menu.title}}</div>
            <ul class="menu-item-group-list" v-if="visible[menu.title]">
                <li class="menu-item" :class="selectKey === item.path && 'selected'" v-for="item in menu.children">
                    <a :href="item.path" @click="noFresh(item.path, $event)">
                        <span>{{ item.label }}</span>
                        <span class="menu-item-sub-title">{{ item.title }}</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</template>

<style scoped>
.yw-base-menu {
    flex: 0 0 25%;
}
</style>